<template>
	<view class="normal-login-container">
		<view class="logo-content align-center justify-center flex">
			<text class="title">中运通注册</text>
		</view>
		<view class="login-form-content">

			<up-form :model="registerForm" :rules="rules" label-width="90px" ref="formRef">
				<view class="form_part">
					<up-form-item prop="username">
						<up-input type="number" prefixIcon="account" style="height: 46px;" shape="circle" clearable
							placeholder="请输入登录账号" v-model="registerForm.username"></up-input>
					</up-form-item>
					<up-form-item prop="password">
						<up-input prefixIcon="lock" style="height: 46px;" shape="circle" clearable placeholder="请输入密码"
							v-model="registerForm.password" password></up-input>
					</up-form-item>
					<up-form-item prop="confirmPassword">
						<up-input prefixIcon="lock" style="height: 46px;" shape="circle" clearable placeholder="请重复输入密码"
							v-model="registerForm.confirmPassword" password></up-input>
					</up-form-item>
					<up-form-item prop="code">
						<up-code-input :style="{ width: windowWidth > 375 ? '75%' : '60%' }"
							 mode='bottomLine' class="myCode" v-model="registerForm.code"
							:space="5"></up-code-input>
						<div style="width: 80px;margin-left: 10px;">
							<up-code ref="uCode" @change="codeChange"></up-code>
							<up-button style="height: 35px;" type="primary" @tap="getCode"><span
									style="font-size: 10px;">{{ tips }}</span></up-button>
						</div>
					</up-form-item>
					<up-form-item prop="roleCode">
						<up-radio-group v-model="registerForm.roleCode" placement="row"
							style="display: flex;justify-content: space-around;">
							<up-radio shape="circle" label="司机" name="driver"></up-radio>
							<up-radio shape="circle" label="船长" name="captain"></up-radio>
						</up-radio-group>
					</up-form-item>
				</view>
			</up-form>
			<view class="action-btn">
				<button @click="handleRegister" class="register-btn cu-btn block bg-blue lg round">注册</button>
			</view>
		</view>
		<view class="xieyi text-center">
			<text @click="goLogin" class="text-blue">使用已有账号登录</text>
		</view>
		<view class="xieyi text-center check" style="margin: 20px 0 0 0;">
			<div style="display: flex;flex-wrap: wrap;align-items: center;"
				:style="{ padding: windowWidth > 375 ? '0 10%' : '0 5%' }">
				<up-checkbox name="agree" usedAlone v-model:checked="isAgree">
				</up-checkbox>
				<view>
					<text class="text-grey1" @click="() => isAgree = !isAgree">我已阅读并同意</text>
					<text class="text-blue" @click="privacyAgreement">《隐私协议》</text>
					<text class="text-grey1">和</text>
				</view>
				<view style="margin-left: 20px;">
					<text class="text-blue" @click="serviceAgreement">《平安结算通商户服务协议》</text>
				</view>
			</div>
		</view>
	</view>
	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
import {
	ref,
	reactive
} from "vue"
import {
	getCodeStr,
	register,
	verificationCodeStr
} from '@/api/login.js'
import {
	encrypt
} from "@/utils/encryption.js"
import {
	useUserStore
} from "@/store"



/* hooks */
const store = useUserStore()


/* 数据 */
// 屏幕宽度
const windowWidth = ref(uni.getWindowInfo().screenWidth)
// 表单
const formRef = ref(null)
// 表单数据
const registerForm = reactive({
	username: "",
	password: "",
	confirmPassword: "",
	code: "",
	roleCode: store.loginRole
})
// 校验规则
const rules = reactive({
	'username': [{
		type: 'string',
		required: true,
		message: '账号不能为空',
		trigger: ['blur', 'change']
	},
	{
		pattern: /(^1[3-9][0-9]{9}$)/g,
		message: '手机格式错误',
		trigger: ['blur', 'change']
	}
	],
	'password': {
		type: 'string',
		required: true,
		message: '密码不能为空',
		trigger: ['blur', 'change']
	},
	'confirmPassword': {
		type: 'string',
		required: true,
		message: '重复密码不能为空',
		trigger: ['blur', 'change']
	},
	'code': {
		type: 'string',
		required: true,
		message: '验证码不能为空',
		trigger: ['blur', 'change']
	}
})
// 获取验证码按钮
const uCode = ref(null)
// 按钮文字
const tips = ref('')
// 提示
const uToastRef = ref(null)
//同意协议
const isAgree = ref(false)


/* 函数 */
const codeChange = (text) => {
	tips.value = text
}
// 获取验证码
const getCode = async () => {
	if (!registerForm.username || !(/(^1[3-9][0-9]{9}$)/g).test(registerForm.username)) {
		uToastRef.value.show({
			position: "top",
			type: 'error',
			message: "账号必须为11位电话号码"
		})
		return
	}
	if (uCode.value.canGetCode) {
		uToastRef.value.show({
			type: 'loading',
			message: "正在获取验证码",
			duration: -1
		})
		let codeRes = await getCodeStr({
			phone: encrypt(registerForm.username)
		})
		uToastRef.value.hide()
		if (codeRes.success) {
			uToastRef.value.show({
				position: "top",
				type: 'success',
				message: "验证码已发送"
			})
			// 通知验证码组件内部开始倒计时
			uCode.value.start()
		}
	} else {
		uToastRef.value.show({
			position: "top",
			type: 'error',
			message: "倒计时结束后再发送"
		})
	}
}
// 注册
const handleRegister = async () => {
	if (!isAgree.value) {
		uToastRef.value.show({
			position: "top",
			type: 'error',
			message: "请阅读并勾选协议"
		})
		return
	}
	let valid = await formRef.value.validate()
	console.log(valid)
	if (valid) {
		if (registerForm.password !== registerForm.confirmPassword) {
			uToastRef.value.show({
				position: "top",
				type: 'error',
				message: "两个密码不一致"
			})
			return
		}
		uToastRef.value.show({
			type: 'loading',
			message: "验证中，请稍候",
			duration: -1
		})
		let res = await verificationCodeStr({
			phone: encrypt(registerForm.username),
			code: encrypt(registerForm.code)
		})
		uToastRef.value.hide()
		if (res.success) {
			uToastRef.value.show({
				type: 'loading',
				message: "注册中，请稍候",
				duration: -1
			})
			let registerRes = await register({
				username: encrypt(registerForm.username),
				password: encrypt(registerForm.password),
				confirmPassword: encrypt(registerForm.confirmPassword),
				code: registerForm.code,
				roleCode: "driver"
			})
			uToastRef.value.hide()
			if (registerRes.success) {
				uToastRef.value.show({
					position: "top",
					type: 'success',
					message: "注册成功",
					complete() {
						uni.reLaunch({
							url: "/pages/login"
						})
					}
				})
			}
		}
	}
}
// 隐私协议
const privacyAgreement = () => {
	if (!isAgree.value) isAgree.value = true
	uni.navigateTo({
		url: '/pages/common/webview/index'
	})
}
// 服务协议
const serviceAgreement = () => {
	if (!isAgree.value) isAgree.value = true
	uni.navigateTo({
		url: '/pages/common/webview/pinganjiesuantong'
	})
}
// 账号密码登录
const goLogin = () => {
	uni.reLaunch({
		url: '/pages/login'
	})
}
</script>

<style lang="scss" scoped>
.myCode ::v-deep .u-code-input__item {
	border-bottom: 1px solid #3c9cff;
}

page {
	background-color: #ffffff;
}

.normal-login-container {
	width: 100%;

	.logo-content {
		width: 100%;
		font-size: 21px;
		text-align: center;
		padding-top: 15%;


		.title {
			margin-left: 10px;
		}
	}

	.login-form-content {
		text-align: center;
		margin: 20px auto;
		margin-top: 15%;
		width: 80%;

		.input-item {
			margin: 20px auto;
			background-color: #f5f6f7;
			height: 45px;
			border-radius: 20px;

			.icon {
				font-size: 38rpx;
				margin-left: 10px;
				color: #999;
			}

			.input {
				width: 100%;
				font-size: 14px;
				line-height: 20px;
				text-align: left;
				padding-left: 15px;
			}

		}

		.register-btn {
			margin-top: 20px;
			height: 45px;
		}

		.xieyi {
			color: #333;
			margin-top: 20px;
		}

		.login-code {
			height: 38px;
			float: right;

			.login-code-img {
				height: 38px;
				position: absolute;
				margin-left: 10px;
				width: 200rpx;
			}
		}
	}
}
</style>